<template>
  <div id="app">
    <router-view></router-view>
    <!-- 第一种限制方法，直接写 -->
    <!-- <image-dialog ref="imageDialog" :max="1"></image-dialog> -->
     <!-- 第二种maxChooseImage传值 -->
    <image-dialog ref="imageDialog" :max="maxChooseImage"></image-dialog>
    <skus-dialog ref="skusDialog"></skus-dialog>
  </div>
</template>

<script>
import imageDialog from './components/image/image-dialog.vue'
import skusDialog from '@/components/skus/skus-dialog.vue'

export default {
  name: 'App',
  components:{
    imageDialog,skusDialog
  },
  // 通过依赖注入，把this传递到子组件，并且在其他的子组件中，使用app. 便可以进行调用
  provide() {
    return {
      app: this
    }
  },
  data(){
     return{
      maxChooseImage:9,
     }
  },
  created(){
    // console.log('页面初始化');
    this.$store.commit('user/initUser')
    // 初始化后台菜单
    this.$store.commit('menu/initNavBar')
    
  },
  methods:{
    //选择图片， 此处将callback得到的传递给子组件imageDialog的chooseImage函数
    chooseImage(callback,max){
      this.maxChooseImage=max,
      this.$refs.imageDialog.chooseImage(callback)
    },
    // 选择规格
    chooseSkus(callback){
      this.$refs.skusDialog.chooseSkus(callback)
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin-top: 60px;
  height: 100%;
}
</style>
